import { memo, useEffect, useMemo, useState } from 'react';
import { KnowMenu } from '@/types/know/know';

interface Props {
  menus: KnowMenu[];
  selectedIndex: number;
  onMark?: (index: number) => void;
}

const SubPageContent = ({ menus, selectedIndex }: Props) => {
  const [activeIndexs, setActiveIndexs] = useState<Set<number>>(new Set());
  // 当selectedIndex没有被选中前，不渲染dom

  const contents = useMemo(() => {
    return menus.map((menu) => {
      return (
        <div
          key={menu.key}
          className="mt-4 flex h-full w-full flex-grow overflow-hidden bg-[#FFF] rounded-[15px]"
          style={{ display: selectedIndex !== menu.key ? 'none' : 'block' }}
        >
          {menu.children}
        </div>
      );
    });
  }, [menus, selectedIndex]);

  useEffect(() => {
    setActiveIndexs((prev) => {
      const newSet = new Set(prev);
      newSet.add(selectedIndex);
      return newSet;
    });

  }, [selectedIndex])

  return <div className="flex h-full flex-col overflow-hidden rounded-[15px] h-[calc(100vh-150px)]">{contents}</div>;
};

export default memo(SubPageContent);
